<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" />
      <p>故障监控</p>
      <span></span>
    </div>
    <div class="breakdown-nav">
      <p
        @click="navCurrent = index"
        :class="navCurrent == index ? 'active':''"
        v-for="(item,index) in ['换电柜故障','充电桩故障']">
        {{item}}<em></em>
      </p>
    </div>
    <div class="breakdown-list">
      <div class="breakdown-item" v-for="item in ['1','2','3']">
        <div class="breakdown-item-title">
          <p>序号: 1</p>
          <p>设备编号: 123456</p>
        </div>
        <div class="breakdown-item-main">
          <p>设备名称: 换电柜1号</p>
          <p>设备地址: 上海 上海市 青浦区华徐公路888号 <em>(1号楼2楼20001)</em></p>
          <p>故障类型: <strong>不可充电</strong></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        navCurrent:0
      }
    }
  }
</script>
<style>
.breakdown-nav{
  height: 1.33rem;
  padding: 0 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
}
.breakdown-nav p{
  font-size: 0.32rem;
  color: #999999;
}
.breakdown-nav p.active{
  font-size: 0.4rem;
  color: #333333;
  background: url(../../assets/images/navActive.png) no-repeat left bottom;
  background-size: 100% 0.16rem;
}
.breakdown-list{
  margin-top: 0.26rem;
  padding: 0.26rem 0.4rem;
  background-color: #FFFFFF;
}
.breakdown-item-title{
  height: 0.88rem;
  padding: 0 0.21rem;
  display: flex;
  align-items: center;
  font-size: 0.32rem;
  color: #333333;
  background-color: #EEEEEE;
}
.breakdown-item-title p{
  margin-right: 0.8rem;
}
.breakdown-item-main{
  margin: 0.32rem 0;
}
.breakdown-item-main p{
  font-size: 0.32rem;
  color: #333333;
  margin: 0.15rem 0 0.15rem 0.15rem;
}
.breakdown-item-main p em{
  color: #999999;
}
.breakdown-item-main p strong{
  color: #FF3333;
  font-weight: 400;
}
</style>
